<template>
	<view class="view-contain">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module leftIcon="arrow-left" :title="title" />
		<u-tabs lineColor="#409EFF" lineWidth="120rpx" :list="[{ name: '新增留言' }]" />
		<view class="form-contain">
			<!-- 新增文字说明 -->
			<view class="description">
				<u-icon name="info" size="24" color="#4A90E2" />
				<span>苏榜小程序致力于更好地提高大家公务员考试水平，设置留言板是为了倾听大家的声音，请大家多多批评，给我优化小程序的意见或建议，请大家动动小手。</span>
			</view>
			<view class="feedback">
				<u-icon name="warning" size="24" color="#FF6A00" />
				<span>小程序也会有一些BUG，希望大家在使用的过程当中，遇到问题，反馈出来。</span>
			</view>
			<u-form :rules="rules" labelPosition="left" :model="formInfo" labelWidth="auto" ref="addForm">
				<u-form-item label="留言内容" prop="messageContent" borderBottom>
					<u-textarea :disabled="type === 3" v-model="formInfo.messageContent"
						:placeholder="type === 3 ? '' : '请输入留言内容'" />
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom-btn-contain">
			<view style="width: 100%;">
				<u-button v-if="type === 1" type="primary" shape="circle" @click="toAdd">保存留言</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		addMessageBoard
	} from "@/config/api.js"

	export const addFormRules = {
		'messageContent': {
			required: true,
			message: '请输入留言内容',
			trigger: ['blur', 'change']
		}
	}

	export default {
		data() {
			return {
				rules: addFormRules,
				type: 1,
				formInfo: {
					messageContent: null,
				},
				isShowDatetime: false,
			}
		},
		computed: {
			...mapState(['user']),
			title() {
				switch (this.type) {
					case 1:
						return '新增打卡'
				}
			}
		},
		onLoad(option) {
			if (option.data) {
				const data = JSON.parse(option.data)
				this.formInfo = data
				this.pickerVal = new Date(data.studyMarkDate).getTime()
				this.type = Number(option.type)
			}
		},
		onShow() {},
		methods: {
			...mapMutations(['setLoginShow', 'emptyUserInfo']),
			confirm(e) {
				this.pickerVal = e.value
			},
			toAdd() {
				this.$refs.addForm.validate().then(async () => {
					const res = await addMessageBoard({
						...this.formInfo
					})
					if (res.code === 200) {
						uni.$u.toast('保存成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 500)
					} else {
						uni.$u.toast(res.msg || '保存失败')
					}
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			// onReady 为uni-app支持的生命周期之一
			this.$refs.addForm.setRules(this.rules)
		}
	}
</script>

<style lang="scss" scoped>
	.view-contain {
		position: relative;
		height: 100vh;
		overflow-y: auto;

		/deep/ .u-checkbox-group {
			flex-wrap: wrap;
		}

		.form-contain {
			background-color: #fff;
			border-radius: 32rpx;
			margin: 12rpx 24rpx;
			padding: 24rpx;

			.title {
				font-weight: bold;
				margin-bottom: 16rpx;
			}

			&.bottom-contain {
				margin-bottom: 200rpx;
			}
		}

		.bottom-btn-contain {
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 99;
			width: calc(100vw - 48rpx);
			height: 150rpx;
			background-color: #fff;
			padding: 48rpx 24rpx 0;
		}
	}

	.description, .feedback {
		background-color: #f9f9f9; /* 背景颜色 */
		border-radius: 8rpx; /* 圆角 */
		padding: 16rpx; /* 内边距 */
		margin-bottom: 16rpx; /* 下边距 */
		color: #4A90E2; /* 字体颜色 */
		font-size: 16px; /* 字体大小 */
		line-height: 1.5; /* 行高 */
		display: flex; /* 使用 flexbox 布局 */
		align-items: center; /* 垂直居中对齐 */
	}
	.feedback {
		color: #FF6A00; /* 反馈信息字体颜色 */
	}
	.description u-icon, .feedback u-icon {
		margin-right: 8px; /* 图标与文字之间的间距 */
	}
</style>